import React, { useState, useRef, useEffect } from 'react'
import { Wrapper } from './style.js'
import VideoFooter from '../../../component/wh_component/Video_Footer'
import Video_sidebar from '../../../component/wh_component/Video_sidebar'
import { PlayOutline } from 'antd-mobile-icons'

export default function Video({ videos, user, description, song, hearts, comments, collects, share, users, cd, id }) {
    const videoRef = useRef(null)
    const [play, setPlay] = useState(false)
    const onVideo = () => {
        if (play) {
            videoRef.current.pause();
            setPlay(false)
        }
        else {
            videoRef.current.play();
            setPlay(true)
        }
    }
    const playOutStyle = {
        width: '15rem',
        height: '15rem',
        position: 'absolute',
        top: '0',
        left: '0',
        bottom: '0',
        right: '0',
        margin: 'auto',
    }
    // useEffect(() => {
    //     console.log(play);
    // },[play])
    return (
        <Wrapper>
            {/* {
                !play ? (
                    <div style={playOutStyle}>
                        <PlayOutline onClick={onVideo} style={{ fontSize: '15rem', color: '#ccc' }} />
                    </div>
                ) : (
                        <span></span>
                    )
            } */}
            <div className='video'>
                {/* <Header/> */}
                <video
                    className='video_player'
                    loop
                    onClick={onVideo}
                    ref={videoRef}
                    src={videos}
                >
                </video>
                <VideoFooter       //底部介绍组件
                    user={user}
                    description={description}
                    song={user+song}
                    cd={cd}
                />
                <Video_sidebar     //右侧点赞组件
                    hearts={hearts}
                    comments={comments}
                    collects={collects}
                    share={share}
                    users={users}
                    user_id='6720c38b2db1379401a148e5'
                    id={id} />
            </div>

        </Wrapper>
    )
}
